<template>
  <div style="width: 100%;min-height: 100vh;min-width: 500px">
    <div class="form-bg" id="warningForm">
      <div class="form">
        <div class="form-title">
          <span style="font-size: 18px;font-weight: bold">{{ data.warningForm.title }}</span>
          <svg v-if="data.warningForm.showCancel" @click="controlWarningForm(false)" style="position: absolute;right: 0;top: 1.5px;cursor: pointer;" width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
        </div>
        <div class="form-content">
          <p>{{data.warningForm.content}}</p>
        </div>
        <div class="form-footer">
          <button v-if="data.warningForm.showCancel" @click="controlWarningForm(false)" style="margin-right: 10px">取消</button>
          <button @click="()=>{
            controlWarningForm(false)
            data.warningForm.okCallBack()
          }">确定</button>
        </div>
      </div>
    </div>

    <div style="width: 100%;max-width: 1940px;position: relative;margin: 0 auto;padding-top: 60px;min-width: 500px">

      <div style="width: calc(100% - 70px);position: fixed;right: 0;top: 0;border-bottom: 1px solid var(--color-neutral-3);backdrop-filter: blur(10px);text-align: center;padding: 12px 0;z-index: 1000"
        :style="{
          background:appData.theme.translucentBackground,
        }"
      >
        <div style="max-width: 1940px;width: 100%;position: relative;margin: 0 auto;min-width: 500px">
          <div style="position: relative;display: inline-block;width: 90%;max-width: 475px">
            <input @keypress="async (e)=>{
              if(e.code=='Enter'){
                await getAllQuestions(true)
              }
            }" id="searchQuestionInput" v-model="data.search.input" placeholder="搜索问题" style="border-radius: 5px;background-color: var(--color-neutral-1);padding: 0 10px;height: 36px;outline: none;color: var(--color-neutral-10);position: relative;width: 100%;color: var(--color-neutral-10)"
                   :style="{
            background:appData.theme.background
          }"
            />
            <svg v-if="data.search.input != ''" @click="data.search.input=''" style="position: absolute;right: 38px;top: 8px;color: var(--color-neutral-10);cursor: pointer;" width="20" height="20" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
            <svg @click="getAllQuestions" style="position: absolute;right: 8px;top: 8px;color: var(--color-neutral-10);cursor: pointer;" width="20" height="20" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 5c9.389 0 17 7.611 17 17 0 3.549-1.087 6.844-2.947 9.57l6.782 6.782a1 1 0 010 1.414l-1.697 1.698a1 1 0 01-1.414 0l-6.604-6.605A16.934 16.934 0 0122 39c-9.389 0-17-7.611-17-17S12.611 5 22 5zm0 4.2C14.93 9.2 9.2 14.93 9.2 22S14.93 34.8 22 34.8 34.8 29.07 34.8 22 29.07 9.2 22 9.2z" fill="currentColor"/></svg>
            <br>
            <div v-if="appData.pageSize.width<1430" style="text-align: center;margin-top: 10px">
              <span :class=" data.currentPage==0?['link-selected']:['link'] " @click="async ()=>{
                if(data.currentPage==0)return
                  data.currentPage = 0
                refreshRightPage(()=>{
                  prepareItems()
                })
              }">推荐</span>
              <span :class=" data.currentPage==1?['link-selected']:['link'] " @click="async ()=>{
             if(data.currentPage==1)return
                data.currentPage = 1
              refreshRightPage(()=>{
                prepareItems()
              })
              }">全部</span>
              <span :class=" data.currentPage==2?['link-selected']:['link'] " @click="async ()=>{
                if(data.currentPage==2)return
                  data.currentPage = 2
                refreshRightPage(()=>{
                  prepareItems()
                })
              }">我的</span>
              <a-trigger trigger="click" :unmount-on-close="false">
                <span class="link" @click="()=>{
                  data.newQuestion.images = []
                }">发表问题</span>
                <template #content>
                  <div style="padding: 15px 15px;border-radius: 5px;border: 1px solid var(--color-neutral-3);backdrop-filter: blur(10px);box-shadow: 0 4px 10px rgba(0,0,0,0.1);transform: translateY(20px);color: var(--color-neutral-10);width: 300px"
                       :style="{
                      background:appData.theme.translucentBackground
                    }"
                  >
                    <p style="font-size: 18px;transition: font-size .3s cubic-bezier(0.23, 1, 0.320, 1)" :style="{
                  fontSize:'18px'
                }">发表问题</p>
                    <p style="font-weight: bold;margin-top: 10px">标题</p>
                    <input v-model="data.newQuestion.title" placeholder="请输入标题" style="width: 100%;border-radius: 3px;color: var(--color-neutral-10);padding: 0 10px;height: 36px;outline: none;margin-top: 5px;background-color: var(--color-neutral-1)"
                    />
                    <p style="font-weight: bold;margin-top: 5px">内容</p>
                    <textarea v-model="data.newQuestion.content" placeholder="请输入内容" style="width: 100%;max-height: 100px;min-height: 100px;padding: 10px 10px;border: 0 !important;outline: none;color: var(--color-neutral-10);background-color: var(--color-neutral-1);margin-top: 5px;border-radius: 5px"></textarea>
                    <div v-if="data.newQuestion.images.length!=0">
                      <p style="font-weight: bold;margin-top: 5px">插图</p>
                      <div style="margin-top: 5px;width: calc(100% + 3px)">
                        <div class="imageWrapper" v-for="(item,index) in data.newQuestion.images" style="width: calc(268.4px / 3 - 3px);margin-right: 3px;height: calc(268.4px / 3 - 3px);margin-bottom: 3px;background-color: var(--color-neutral-1);border-radius: 5px;background-size: cover;background-position: center;background-repeat: no-repeat;display: inline-block;position: relative"
                             :style="{
                        backgroundImage:'url(' + config.serverURL + '/download/' + item + ')'
                      }"
                        >
                          <div class="imageControl" style="position: relative;width: 52px;height: 26px;overflow: hidden;border-radius: 5px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);position: absolute;left: 5px;top: 5px">
                            <div style="display: inline-block;padding: 3px 3px;backdrop-filter: blur(10px);width: 26px;text-align: center;height: 26px;position: absolute;left: 0;top: 0"
                                 :style="{
                          background:appData.theme.translucentBackground
                        }"
                                 @click="async ()=>{
                             await tool.axiosPostWithCheckStatus(config.serverURL,'/delete',{
                               name:item
                             })
                             data.newQuestion.images = tool.deleteArrayElemByIndex(data.newQuestion.images,index)
                           }"
                            >
                              <svg width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M30 4a2 2 0 012 2l-.001 1.999L42.719 8c.445 0 .606.046.77.134.162.087.29.215.377.378.088.163.134.324.134.77v1.436c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134L40 11.999 40 42a2 2 0 01-2 2H10a2 2 0 01-2-2l-.001-30.001L5.282 12c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V9.282c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134l10.717-.001L16 6a2 2 0 012-2h12zm5.999 7.999h-24L12 40h24l-.001-28.001zM21 18a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2zm8 0a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2z" fill="currentColor"/></svg>
                            </div>
                            <div style="display: inline-block;padding: 3px 3px;backdrop-filter: blur(10px);width: 26px;text-align: center;height: 26px;position: absolute;left: 26px;top: 0"
                                 :style="{
                          background:appData.theme.translucentBackground
                        }"
                                 @click="()=>{
                             window.open(config.serverURL + '/download/' + item,'_blank')
                           }"
                            >
                              <svg width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.97 37C30.446 37 36.44 32.88 42 23.974 36.584 15.099 30.602 11 23.97 11 17.34 11 11.378 15.097 6 23.974 11.521 32.883 17.496 37 23.97 37zm-.003-30c8.043 0 14.965 4.916 20.767 14.748l.355.61.373.664a2 2 0 01-.01 1.957l-.4.694C39.037 35.891 32.01 41 23.966 41c-7.886 0-14.78-4.913-20.677-14.74l-.285-.48a49.45 49.45 0 01-.354-.615l-.108-.19a2 2 0 01-.01-1.948l.337-.607.18-.316C8.856 12.034 15.829 7 23.967 7zM24 16a8 8 0 100 16 8 8 0 000-16zm0 4a4 4 0 110 8 4 4 0 010-8z" fill="currentColor"/></svg>
                            </div>
                          </div>


                        </div>
                      </div>
                    </div>
                    <div style="text-align: right">
                      <button v-if="data.newQuestion.images.length<9" style="border: 0 !important;padding: 5px 5px;float: left" @click="uploadImage">上传图片</button>
                      <button style="border: 0 !important;padding: 5px 5px;margin-left: 5px" @click="async ()=>{
                    if(data.newQuestion.title.length<10){
                      controlWarningForm(true,'提示','标题字数不能少于10',()=>{},false)
                      return
                    }
                    if(data.newQuestion.images.length>9){
                      controlWarningForm(true,'提示','插图个数不能多于9个',()=>{},false)
                      return
                    }
                    controlLoading(1)
                    await tool.axiosPostWithCheckStatus(config.serverURL,'/question/publish',{
                      token:homeData.token,
                      form:data.newQuestion,
                      userMark:homeData.loginedUserInfo.mark
                    })
                    data.showWriteQuestionBoard = false
                    data.newQuestion = {
                      title:'',
                      content:'',
                      images:[]
                    }
                    getAllQuestions()
                    controlLoading(0)
                  }">发表</button>
                    </div>

                  </div>
                </template>
              </a-trigger>

            </div>
          </div>
          <div style="width: 300px;border: 1px solid var(--color-neutral-3);border-radius: 5px;position: absolute;left: 40px;top: 70px;text-align: left;color: var(--color-neutral-10);box-shadow: 0 1px 3px rgba(0,0,0,0.1)"
               :style="{
              background:appData.pageSize.width>=1430?appData.theme.background:appData.theme.translucentBackground,
              display:appData.pageSize.width>=1430?'unset':'none'
            }"
          >
            <div style="padding: 15px 15px;border-bottom: 1px solid var(--color-neutral-3);padding-top: 25px;">
              <div v-if="homeData.loginedUserInfo!=undefined" style="text-align: center;">
                <v-avatar v-if="homeData.loginedUserInfo!=undefined" color="rgb(0,120,215)" size="48">
                  <span v-if="homeData.loginedUserInfo.avatar==''">{{ func.getShortName(homeData.loginedUserInfo.name) }}</span>
                  <div v-if="homeData.loginedUserInfo.avatar!=''"  style="width: 48px;height: 48px;display: inline-block;background-position: center;background-repeat: no-repeat;background-size: cover;"
                    :style="{
                      backgroundImage:'url(' + appData.serverURL + '/download/' + homeData.loginedUserInfo.avatar + ')'
                    }"
                  >
                  
                  </div>
                </v-avatar>
                <br>
                <p style="font-size: 16px;color: var(--color-neutral-10);margin-top: 8px;">{{ homeData.loginedUserInfo.name }}</p>
                <p style="font-size: 12px;color: var(--color-neutral-6);margin-top: 5px;">{{ homeData.loginedUserInfo.email }}</p>
              </div>
              <div style="text-align: center;margin-top: 10px;padding-bottom: 10px;">
                <div style="display: inline-block;color:var(--color-neutral-10);border-radius: 5px;background-color: var(--color-neutral-2);padding: 5px 20px;border-radius: 5px;margin-right: 15px;">
                  <p style="font-size: 18px;">{{ data.items.my.length }}</p>
                  <p style="font-size: 12px;">问题</p>
                </div>
                <div style="display: inline-block;color:var(--color-neutral-10);border-radius: 5px;background-color: var(--color-neutral-2);padding: 5px 20px;border-radius: 5px;margin-right: 15px;">
                  <p style="font-size: 18px;">{{ getUserFavoriteAll() }}</p>
                  <p style="font-size: 12px;">获赞</p>
                </div>
                <div style="display: inline-block;color:var(--color-neutral-10);border-radius: 5px;background-color: var(--color-neutral-2);padding: 5px 20px;border-radius: 5px;">
                  <p style="font-size: 18px;">{{ getUserCommentAll() }}</p>
                  <p style="font-size: 12px;">评论</p>
                </div>
              </div>
            </div>
            <div style="padding: 15px 15px;border-bottom: 1px solid var(--color-neutral-3)">
              <button @click="async ()=>{
                if(data.currentPage==0)return
                data.currentPage=0
                refreshRightPage(prepareItems)
              }"
                      :style="{
                background:data.currentPage==0?appData.theme.translucentBackground:'unset'
              }" style="width: 100%;padding-left: 10px;border: 0 !important;position: relative;font-size: 14px;text-align: left"
              >
                推荐
                <div v-if="data.currentPage==0" style="width: 3px;height: 14px;border-radius: 10px;background-color: rgb(0,120,215);position: absolute;left: 0;top: 10px"></div>
              </button>
              <button @click="async ()=>{
                if(data.currentPage==1)return
                data.currentPage=1
                refreshRightPage(prepareItems)
              }"
                      :style="{
                background:data.currentPage==1?appData.theme.translucentBackground:'unset'
              }" style="width: 100%;padding-left: 10px;border: 0 !important;position: relative;font-size: 14px;text-align: left;margin-top: 5px"
              >
                全部
                <div v-if="data.currentPage==1" style="width: 3px;height: 14px;border-radius: 10px;background-color: rgb(0,120,215);position: absolute;left: 0;top: 10px"></div>
              </button>
              <button @click="async ()=>{
                if(data.currentPage==2)return
                data.currentPage=2
                refreshRightPage(prepareItems)
              }"
                      :style="{
                background:data.currentPage==2?appData.theme.translucentBackground:'unset'
              }" style="width: 100%;padding-left: 10px;border: 0 !important;position: relative;font-size: 14px;text-align: left;margin-top: 5px"
              >
                我的
                <div v-if="data.currentPage==2" style="width: 3px;height: 14px;border-radius: 10px;background-color: rgb(0,120,215);position: absolute;left: 0;top: 10px"></div>
              </button>
            </div>
            <div style="padding: 15px 15px">
              <button v-if="data.showWriteQuestionBoard==false" @click="data.showWriteQuestionBoard = true;data.newQuestion.images = []"
                      style="width: 100%;padding-left: 10px;border: 0 !important;position: relative;font-size: 14px;text-align: left"
              >
                发表问题
              </button>
              <div :style="{
                display:data.showWriteQuestionBoard==true?'unset':'none'
              }">
                <p style="font-size: 18px;transition: font-size .3s cubic-bezier(0.23, 1, 0.320, 1)" :style="{
                  fontSize:data.showWriteQuestionBoard?'18px':'14px'
                }">发表问题</p>
                <p style="font-weight: bold;margin-top: 10px">标题</p>
                <input v-model="data.newQuestion.title" placeholder="请输入标题" style="width: 100%;border-radius: 3px;color: var(--color-neutral-10);padding: 0 10px;height: 36px;outline: none;margin-top: 5px;background-color: var(--color-neutral-1)"
                />
                <p style="font-weight: bold;margin-top: 5px">内容</p>
                <textarea v-model="data.newQuestion.content" placeholder="请输入内容" style="width: 100%;max-height: 100px;min-height: 100px;padding: 10px 10px;border: 0 !important;outline: none;color: var(--color-neutral-10);background-color: var(--color-neutral-1);margin-top: 5px;border-radius: 5px"></textarea>
                <div v-if="data.newQuestion.images.length!=0">
                  <p style="font-weight: bold;margin-top: 5px">插图</p>
                  <div style="margin-top: 5px;width: calc(100% + 3px)">
                    <div class="imageWrapper" v-for="(item,index) in data.newQuestion.images" style="width: calc(268.4px / 3 - 3px);margin-right: 3px;height: calc(268.4px / 3 - 3px);margin-bottom: 3px;background-color: var(--color-neutral-1);border-radius: 5px;background-size: cover;background-position: center;background-repeat: no-repeat;display: inline-block;position: relative"
                      :style="{
                        backgroundImage:'url(' + config.serverURL + '/download/' + item + ')'
                      }"
                    >
                      <div class="imageControl" style="position: relative;width: 52px;height: 26px;overflow: hidden;border-radius: 5px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);position: absolute;left: 5px;top: 5px">
                        <div style="display: inline-block;padding: 3px 3px;backdrop-filter: blur(10px);width: 26px;text-align: center;height: 26px;position: absolute;left: 0;top: 0"
                             :style="{
                          background:appData.theme.translucentBackground
                        }"
                             @click="async ()=>{
                             await tool.axiosPostWithCheckStatus(config.serverURL,'/delete',{
                               name:item
                             })
                             data.newQuestion.images = tool.deleteArrayElemByIndex(data.newQuestion.images,index)
                           }"
                        >
                          <svg width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M30 4a2 2 0 012 2l-.001 1.999L42.719 8c.445 0 .606.046.77.134.162.087.29.215.377.378.088.163.134.324.134.77v1.436c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134L40 11.999 40 42a2 2 0 01-2 2H10a2 2 0 01-2-2l-.001-30.001L5.282 12c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V9.282c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134l10.717-.001L16 6a2 2 0 012-2h12zm5.999 7.999h-24L12 40h24l-.001-28.001zM21 18a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2zm8 0a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2z" fill="currentColor"/></svg>
                        </div>
                        <div style="display: inline-block;padding: 3px 3px;backdrop-filter: blur(10px);width: 26px;text-align: center;height: 26px;position: absolute;left: 26px;top: 0"
                             :style="{
                          background:appData.theme.translucentBackground
                        }"
                             @click="()=>{
                             window.open(config.serverURL + '/download/' + item,'_blank')
                           }"
                        >
                          <svg width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.97 37C30.446 37 36.44 32.88 42 23.974 36.584 15.099 30.602 11 23.97 11 17.34 11 11.378 15.097 6 23.974 11.521 32.883 17.496 37 23.97 37zm-.003-30c8.043 0 14.965 4.916 20.767 14.748l.355.61.373.664a2 2 0 01-.01 1.957l-.4.694C39.037 35.891 32.01 41 23.966 41c-7.886 0-14.78-4.913-20.677-14.74l-.285-.48a49.45 49.45 0 01-.354-.615l-.108-.19a2 2 0 01-.01-1.948l.337-.607.18-.316C8.856 12.034 15.829 7 23.967 7zM24 16a8 8 0 100 16 8 8 0 000-16zm0 4a4 4 0 110 8 4 4 0 010-8z" fill="currentColor"/></svg>
                        </div>
                      </div>


                    </div>
                  </div>
                </div>
                <div style="text-align: right">
                  <button v-if="data.newQuestion.images.length<9" style="border: 0 !important;padding: 5px 5px;float: left" @click="uploadImage">上传图片</button>
                  <button style="border: 0 !important;padding: 5px 5px;margin-left: 5px" @click="()=>{
                    data.newQuestion.title = ''
                    data.newQuestion.content = ''
                    data.newQuestion.images = []
                    data.showWriteQuestionBoard = false
                  }">取消</button>
                  <button style="border: 0 !important;padding: 5px 5px;margin-left: 5px" @click="async ()=>{
                    if(data.newQuestion.title.length<10){
                      controlWarningForm(true,'提示','标题字数不能少于10',()=>{},false)
                      return
                    }
                    if(data.newQuestion.images.length>9){
                      controlWarningForm(true,'提示','插图个数不能多于9个',()=>{},false)
                      return
                    }
                    controlLoading(1)
                    await tool.axiosPostWithCheckStatus(config.serverURL,'/question/publish',{
                      token:homeData.token,
                      form:data.newQuestion,
                      userMark:homeData.loginedUserInfo.mark
                    })
                    data.showWriteQuestionBoard = false
                    data.newQuestion = {
                      title:'',
                      content:'',
                      images:[]
                    }
                    getAllQuestions()
                    controlLoading(0)
                  }">发表</button>
                </div>

              </div>
            </div>
          </div>
        </div>

        <div>

        </div>
      </div>

      <div style="width: 100%;position: relative;color: var(--color-neutral-10);padding: 40px 44px;transition-property: opacity,transform;transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1); "
        :style="{
          paddingTop:appData.pageSize.width<1430?'60px':'20px',
          paddingLeft:appData.pageSize.width<1430?'40px':'380px',
          opacity:(data.rightStatus==0 || data.rightStatus==3)?1:0,
          transform:(data.rightStatus!=2)?'translateY(0)':'translateY(40px)',
          transitionDuration:data.rightStatus!=2?'.3s':'0s',
          height:(data.maxColHeight + 60).toString() + 'px'
        }"
      >
        <div id="itemsWrapper" style="width: calc(100% + 20px);position: relative;padding-top: 1px;">
          <p v-if="data.disNum==0" style="color: var(--color-neutral-10)">没有问题</p>
          <div class="itemsCol" v-for="(item,index) in data.displayItems" style="display: inline-block;height: 100%;padding-right: 20px;position: absolute"
            :style="{
              width:'calc(100% / ' + data.rightPageColNum.toString() + ')',
              marginLeft:(data.rightPageWidth / data.rightPageColNum * index).toString() + 'px'
            }"
          >
            <div class="questionItem" v-for="subItem in item" style="margin-bottom: 20px;box-shadow: 0 1px 3px rgba(0,0,0,0.1);border: 1px solid var(--color-neutral-3);padding: 20px 20px;border-radius: 5px"
              :style="{
                background:appData.theme.background
              }"

            >
              <div style="position: relative">
                <a-trigger trigger="click" :unmount-on-close="false">
                  <div>
                    <v-avatar color="rgb(0,120,215)" style="margin-right: 10px;position: absolute;left: 0;top:2px">
                      <span v-if="subItem.userInfo.avatar==''">{{ tool.getShortName(subItem.userInfo.name) }}</span>
                      <div v-if="subItem.userInfo.avatar!=''"  style="width: 48px;height: 48px;display: inline-block;background-position: center;background-repeat: no-repeat;background-size: cover;"
                           :style="{
                  backgroundImage:'url(' + appData.serverURL + '/download/' + subItem.userInfo.avatar + ')'
                }"
                      >
                      </div>
                    </v-avatar>
                    <div style="width: calc(100% - 50px);display: inline-block;margin-left: 50px;word-break: break-all">
                      <span style="font-size: 16px;font-weight: bold">{{ subItem.userInfo.name }}</span><br>
                      <span style="font-size: 14px;color: var(--color-neutral-6)">{{ subItem.userInfo.email }}</span>
                    </div>
                  </div>
                  <template #content>
                    <div
                      :style="{
                        width:(data.rightPageWidth / data.rightPageColNum - 20).toString() + 'px'
                      }"
                      style="text-align: left;padding: 5px 8px"
                    >
                      <div style="max-width: 240px;padding: 10px 10px;border-radius: 10px;box-shadow: 0 4px 10px rgba(0,0,0,0.1);backdrop-filter: blur(100px);display: inline-block;color: var(--color-neutral-10);width: 100%;border: 1px solid rgba(128,128,128,0.3)"
                           :style="{
                              backgroundColor:appData.theme.translucentBackground
                            }"
                      >
                        <p>
                          <span style="font-weight: bold;font-size: 18px">考生信息</span>
                        </p>
                        <p style="margin-top: 5px">
                          <span style="font-weight: bold;">分数：</span><span>{{ subItem.userInfo.score }}</span>
                        </p>
                        <p style="margin-top: 5px">
                          <span style="font-weight: bold">位次：</span><span>{{ subItem.userInfo.ranks }}</span>
                        </p>
                        <p style="margin-top: 5px">
                          <span style="font-weight: bold">省份：</span><span>{{ subItem.userInfo.province }}</span>
                        </p>
                        <p style="margin-top: 5px">
                          <span style="font-weight: bold">选科类型：</span><span>{{ subItem.userInfo.subjectType }}</span>
                        </p>
                        <p style="margin-top: 5px">
                          <span style="font-weight: bold">选科：</span><span>{{ getUserSubjectsString(subItem.userInfo.subjects) }}</span>
                        </p>
                        <button v-if="homeData.loginedUserInfo==undefined || (homeData.loginedUserInfo!=undefined && subItem.userInfo.mark!=homeData.loginedUserInfo.mark)" style="width: 100%;width: 100%;border-radius: 5px;margin-top: 10px" @click="async ()=>{
                          $emit('showChatForm',subItem)
                        }">发消息</button>
                        <button style="width: 100%;width: 100%;border-radius: 5px;margin-top: 10px" @click="async ()=>{
                          controlForward(true,8,subItem.userInfo.mark)
                        }">将此人推荐给别人</button>
                      </div>
                    </div>
                  </template>
                </a-trigger>

              </div>
              <p style="margin-top: 10px;font-weight: bold;font-size: 16px;user-select: text;width: 100%;word-break: break-all">{{ subItem.title }}</p>
              <p v-if="subItem.content!=''" style="margin-top: 5px;font-size: 14px;user-select: text;width: 100%;word-break: break-all">{{ subItem.content }}</p>
              <div style="margin-top: 5px">
                <image-group :server-u-r-l="config.serverURL" :images-u-r-ls="JSON.parse(subItem.images)" :col-width="data.rightPageWidth / data.rightPageColNum - 20"></image-group>
              </div>
              <p style="font-style: 12px;margin-top: 5px;color: var(--color-neutral-6)">发表于{{ formatDateForUser(new Date(subItem.time)) }}</p>
              <div style="margin-top: 5px;text-align: right">
                <button v-if="subItem.userMark==homeData.loginedUserInfo.mark" style="padding: 5px 5px;border: 0 !important;font-size: 12px;float: left" @click="async ()=>{
                  await tool.axiosPostWithCheckStatus(config.serverURL,'/question/delete',{
                    questionMark: subItem.mark,
                    token: homeData.token
                  })
                 await tool.waitSeconds(0.1)
                  await getAllQuestions(false)
                }">
                  <svg style="position: relative;top: 2.5px;margin-right: 2px" width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M30 4a2 2 0 012 2l-.001 1.999L42.719 8c.445 0 .606.046.77.134.162.087.29.215.377.378.088.163.134.324.134.77v1.436c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134L40 11.999 40 42a2 2 0 01-2 2H10a2 2 0 01-2-2l-.001-30.001L5.282 12c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V9.282c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134l10.717-.001L16 6a2 2 0 012-2h12zm5.999 7.999h-24L12 40h24l-.001-28.001zM21 18a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2zm8 0a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2z" fill="currentColor"/></svg><span>删除</span>
                </button>
                <button style="padding: 5px 5px;border: 0 !important;font-size: 12px;margin-left: 5px"

                        @click="async ()=>{
                          if(homeData.loginedUserInfo==undefined){
                            router.push('/login')
                            return
                          }
                          await tool.axiosPostWithCheckStatus(config.serverURL,'/question/favorite',{
                            token: homeData.token,
                            userMark: homeData.loginedUserInfo.mark,
                            questionMark: subItem.mark,
                            op:isUserFavorite(JSON.parse(subItem.favoriteUserMarks),homeData.loginedUserInfo.mark)?false:true
                          })
                  await getAllQuestions(false)
                        }"
                >
                  <svg
                      :style="{
                    color:(homeData.loginedUserInfo!=undefined && isUserFavorite(JSON.parse(subItem.favoriteUserMarks),homeData.loginedUserInfo.mark)==true)?'red':'var(--color-neutral-10)'
                 }"
                      style="position: relative;top: 2.5px;margin-right: 2px" width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M26.675 2.493l.365.17c2.432 1.173 5.964 3.54 5.964 7.34 0 1.506-.67 3.504-2.007 5.994h7.578c5.968 0 7.339 5.268 5.968 9.215l-5.968 15.71c-.504 1.827-2.183 3.095-4.1 3.095H9.985v-28.02h4.094l8.9-12.661c.562-.894 2.08-1.58 3.696-.843zM7 16v28H3V16h4zm18.677-9.547l-9.52 13.544h-2.172v20.02h20.49c.124 0 .22-.073.245-.16l.05-.18 6.011-15.826c.79-2.328.002-3.854-2.206-3.854H24.307l3.167-5.893c1.053-1.96 1.53-3.385 1.53-4.101 0-1.16-1.244-2.474-3.327-3.55z" fill="currentColor"/></svg><span
                    :style="{
                    color:(homeData.loginedUserInfo!=undefined && isUserFavorite(JSON.parse(subItem.favoriteUserMarks),homeData.loginedUserInfo.mark)==true)?'red':'var(--color-neutral-10)'
                 }"
                >赞<span v-if="JSON.parse(subItem.favoriteUserMarks).length!=0">{{ ' ' + JSON.parse(subItem.favoriteUserMarks).length.toString()}}</span></span>
                </button>
                <button @click="controlCommentForm(true,subItem)" style="padding: 5px 5px;border: 0 !important;font-size: 12px;margin-left: 5px">
                  <svg style="position: relative;top: 2.5px;margin-right: 2px" width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M42 4c1.105 0 2 .914 2 2.042V34.98c0 1.128-.895 2.042-2 2.042H32l-6.586 6.38a1.97 1.97 0 01-2.828 0L16 37.022H6c-1.105 0-2-.914-2-2.042V6.042C4 4.914 4.895 4 6 4h36zm-2 4H8v25.02h9.657L24 39l6.343-5.98H40V8zM27 22a1 1 0 011 1v2a1 1 0 01-1 1H13a1 1 0 01-1-1v-2a1 1 0 011-1h14zm8-8a1 1 0 011 1v2a1 1 0 01-1 1H13a1 1 0 01-1-1v-2a1 1 0 011-1h22z" fill="currentColor"/></svg>
                  <span>评论<span v-if="subItem.comments.length!=0">{{ ' ' + subItem.comments.length.toString()}}</span></span>
                </button>
                <button style="padding: 5px 5px;border: 0 !important;font-size: 12px;margin-left: 5px" @click="async ()=>{
                  controlForward(true,7,subItem.mark)
                }">
                  <svg style="position: relative;top: 2.5px;margin-right: 2px" width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M25 15.37c-12.15 0-22 9.992-22 22.318 0 .766.083 1.795.248 3.088a.5.5 0 00.92.202l.317-.496c.304-.467.57-.847.798-1.14 3.586-4.616 9.448-7.225 17.17-7.331L25 32.007v8.975c0 .562.46 1.018 1.029 1.018.273 0 .534-.107.727-.298L43.548 25.08a1.517 1.517 0 000-2.16L26.756 6.298a1.036 1.036 0 00-1.455 0c-.193.191-.301.45-.301.72v8.352zm0 4h4v-5.222L38.953 24 29 33.852v-5.845h-6.052c-5.805 0-10.882 1.263-14.972 3.713C10.41 24.529 17.12 19.37 25 19.37z" fill="currentColor"/></svg><span>转发<span v-if="subItem.forward!=0">{{ ' ' + subItem.forward.toString()}}</span></span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div style="position: fixed;width: calc(100% - 70px);height: 100vh;background-color: rgba(0,0,0,0.1);left: 70px;top: 0;z-index: 1000;padding-left: calc(50% - 35px);padding-top: 50vh;min-width: 500px;transition-property: opacity;transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);transition-duration: .3s;backdrop-filter: blur(20px)"
         :style="{
          display:data.commentForm.status==0?'none':'inline-block',
          opacity:data.commentForm.status<2?0:1
        }"
    >
      <div v-if="data.commentForm.status!=0" style="border-radius: 10px;box-shadow: 0 1px 3px rgba(0,0,0,0.1);transform: translate(-50%,-50%);display: inline-block;min-width: 400px;position: relative;max-height: 600px;height: 80vh;width: 1000px;transition-property: scale,opacity;transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);transition-duration: .3s;;overflow: hidden;border: 1px solid var(--color-neutral-2)"
        :style="{
          background:appData.theme.background,
          width:appData.pageSize.width<1430?'300px':'1000px',
          display:data.commentForm.status==0?'none':'inline-block',
          scale:data.commentForm.status<2?1.01:1,
          opacity:data.commentForm.status<2?0:1,

        }"
      >
        <div style="position: fixed;z-index: 1001;padding: 20px 20px;padding-bottom: 5px;width: 100%;border-bottom: 1px solid var(--color-neutral-3)"
          :style="{
            background:appData.theme.background,
            display:appData.pageSize.width<1430?'unset':'none'
          }"
        >
          <p style="margin-top: 0px;font-weight: bold;font-size: 16px;user-select: text;width: 100%;word-break: break-all">{{ data.commentForm.item.title }}</p>
          <p style="font-size: 12px;color: var(--color-neutral-6)">{{ data.commentForm.item.comments.length }}条评论</p>
        </div>

        <div style="width: 100%;padding: 20px 20px;position: absolute;left: 0;bottom: 0;padding-top: 10px;z-index: 1010;backdrop-filter: blur(10px);border-top: 1px solid var(--color-neutral-3)"
             v-if="appData.pageSize.width<=1430"
             :style="{
               background:appData.theme.translucentBackground
             }"
        >
          <div v-if="data.commentForm.image!=''" style="padding: 5px 5px;border-radius: 5px;border: 1px solid var(--color-neutral-3);width: 100px;height: 100px;backdrop-filter: blur(10px);position: absolute;bottom: 70px;backdrop-filter: blur(10px)"
               :style="{
                  background:appData.theme.translucentBackground
                }"
               @click="openLink(config.serverURL + '/download/' + data.commentForm.image)"
          >
            <div style="width: 100%;height: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;border-radius: 5px;position: relative"
                 :style="{
                  backgroundImage:'url(' + config.serverURL + '/download/' + data.commentForm.image + ')'
                  }"
            >

            </div>
          </div>
          <button @click="async ()=>{
                if(data.commentForm.image==''){
                  let fn = await selectAndUploadImage()
                  this.data.commentForm.image = fn
                }else{
                  await tool.axiosPostWithCheckStatus(config.serverURL,'/delete',{
                    name:data.commentForm.image
                  })
                  data.commentForm.image = ''
                }
              }"  :title="data.commentForm.image==''?'添加图片':'删除图片'" style="border: 0 !important;padding: 5px 5px;height: 36px;width: 36px;text-align: center;padding-top: 8.5px;position: absolute;left: 20px;top: 10px;">
            <svg v-if="data.commentForm.image==''" width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M34 12a2 2 0 012 2v28a2 2 0 01-2 2H6a2 2 0 01-2-2V14a2 2 0 012-2h28zm-2 4H8v24h24V16zm-4.119 10.366a.8.8 0 01.235.565V35.4a.6.6 0 01-.6.6H23.51l.012.011H12.689a.6.6 0 01-.424-1.024l4.442-4.443a.8.8 0 011.12-.01l2.423 2.331 6.5-6.5a.8.8 0 011.131 0zM42 4a2 2 0 012 2v25a1 1 0 01-1 1h-2a1 1 0 01-1-1V8H17a1 1 0 01-1-1V5a1 1 0 011-1h25zM18 20v6h-6v-6h6z" fill="currentColor"/></svg>
            <svg v-if="data.commentForm.image!=''" width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M33 2l9 9.429V24h-4v-9.962l-8 .001L29.999 6H10v36h13v4H8a2 2 0 01-2-2V4a2 2 0 012-2h25zm2.07 32.24l4.75-4.75c.315-.315.462-.396.639-.45a.908.908 0 01.534 0c.177.054.324.135.64.45l1.015 1.016c.315.315.397.462.45.64a.908.908 0 010 .534c-.053.177-.135.324-.45.639l-4.75 4.75 4.75 4.75c.315.316.397.463.45.64a.908.908 0 010 .534c-.053.177-.135.324-.45.64l-1.015 1.015c-.316.315-.463.397-.64.45a.908.908 0 01-.534 0c-.177-.053-.324-.135-.64-.45l-4.75-4.75-4.75 4.75c-.315.315-.462.397-.64.45a.908.908 0 01-.534 0c-.177-.053-.324-.135-.639-.45l-1.015-1.015c-.316-.316-.397-.463-.45-.64a.908.908 0 010-.534c.053-.177.134-.324.45-.64l4.75-4.75-4.75-4.75c-.316-.315-.397-.462-.45-.64a.908.908 0 010-.534c.053-.177.134-.324.45-.639l1.015-1.015c.315-.316.462-.397.64-.45a.908.908 0 01.534 0c.177.053.324.134.639.45l4.75 4.75z" fill="currentColor"/></svg>
          </button>
          <input  @keypress="async (e)=>{
                if(e.code!='Enter')return
if(data.commentForm.input=='' && data.commentForm.image==''){
                    controlWarningForm(true,'提示','请输入评论内容或上传图片。',()=>{},false)
                    return
                  }
                data.newQuestion.title = ''
                  data.newQuestion.content = data.commentForm.input
                  data.commentForm.input = ''
                  data.newQuestion.images = JSON.stringify(data.commentForm.image==''?[]:[data.commentForm.image])
                  await tool.axiosPostWithCheckStatus(config.serverURL,'/question/publish',{
                    form:data.newQuestion,
                    userMark:homeData.loginedUserInfo.mark,
                    questionMark:data.commentForm.item.mark,
                    token:homeData.token
                  })
                  await getAllQuestions(false)
                  for(let i=0;i<data.items.all.length;i++){
                    if(data.items.all[i].mark==data.commentForm.item.mark){
                      data.commentForm.item = data.items.all[i]
                      break
                    }
                  }
                  data.commentForm.image = ''

              }" v-model="data.commentForm.input" placeholder="在这里输入评论" style="border-radius: 3px;background-color: var(--color-neutral-1);width: calc(100% - 82px);line-height: 36px;padding: 0 10px;margin-left: 41px;outline: none;color: var(--color-neutral-10)"
            :style="{
                background:appData.theme.background
            }"
          />
          <button style="border: 0 !important;padding: 5px 5px;height: 36px;width: 36px;text-align: center;padding-top: 8.5px;position: absolute;right: 20px;top: 10px" @click="async ()=>{
            if(data.commentForm.input=='' && data.commentForm.image==''){
                    controlWarningForm(true,'提示','请输入评论内容或上传图片。',()=>{},false)
                    return
                  }
            let t1 = data.newQuestion.title
            let t2 = data.newQuestion.content
            let t3 = data.newQuestion.input
            let t4 = data.newQuestion.images
            data.newQuestion.title = ''
            data.newQuestion.content = data.commentForm.input
            data.commentForm.input = ''
            data.newQuestion.images = JSON.stringify(data.commentForm.image==''?[]:[data.commentForm.image])
            await tool.axiosPostWithCheckStatus(config.serverURL,'/question/publish',{
              form:data.newQuestion,
              userMark:homeData.loginedUserInfo.mark,
              questionMark:data.commentForm.item.mark,
              token:homeData.token
            })
            data.newQuestion.title = t1
            data.newQuestion.content = t2
            data.newQuestion.input = t3
            data.newQuestion.images = t4
            await getAllQuestions()
            for(let i=0;i<data.items.all.length;i++){
              if(data.items.all[i].mark==data.commentForm.item.mark){
                data.commentForm.item = data.items.all[i]
                break
              }
            }
            data.commentForm.image = ''

          }">
            <svg width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 17.003v-13c0-1.464 1.512-2.415 2.817-1.826l.134.066 37 20c1.35.73 1.397 2.626.14 3.437l-.14.082-37 20c-1.288.697-2.843-.182-2.946-1.61L5 44.002v-13a2 2 0 01.467-1.284l.119-.13 5.586-5.585-5.586-5.586a2 2 0 01-.578-1.238L5 17.003v-13 13zm31.094 8.999H14.829L9 31.832v8.816l27.094-14.646zM9 7.357v8.817l5.828 5.828h21.266L9 7.357z" fill="currentColor"/></svg>
          </button>
        </div>

        <div style="position: relative;width: 100%;height: 100%"
          :style="{
            overflowY:appData.pageSize.width<1430?'auto':'hidden'
          }"
        >

          <div style="width: 400px;display: inline-block;height: 100%;border-right: 1px solid var(--color-neutral-3);position: relative;overflow-y: auto;position: relative;z-index: 1002"
               :style="{
              height:appData.pageSize.width<1430?'auto':'100%',
            }"
          >

            <div style="margin-bottom: 20px;padding: 20px 20px"
                 :style="{
                background:appData.theme.background
              }"

            >
              <div style="position: relative">
                <v-avatar color="rgb(0,120,215)" style="margin-right: 10px;position: absolute;left: 0;top:2px">
                  <span v-if="data.commentForm.item.userInfo.avatar==''">{{ tool.getShortName(data.commentForm.item.userInfo.name) }}</span>
                  <div v-if="data.commentForm.item.userInfo.avatar!=''"  style="width: 48px;height: 48px;display: inline-block;background-position: center;background-repeat: no-repeat;background-size: cover;"
                       :style="{
                      backgroundImage:'url(' + appData.serverURL + '/download/' + data.commentForm.item.userInfo.avatar + ')'
                    }"
                  >
                  </div>
                </v-avatar>
                <div style="width: calc(100% - 50px);display: inline-block;margin-left: 50px;word-break: break-all">
                  <span style="font-size: 16px;font-weight: bold;color: var(--color-neutral-10)">{{ data.commentForm.item.userInfo.name }}</span><br>
                  <span style="font-size: 14px;color: var(--color-neutral-6)">{{ data.commentForm.item.userInfo.email }}</span>
                </div>
              </div>
              <p style="margin-top: 10px;font-weight: bold;font-size: 16px;user-select: text;width: 100%;word-break: break-all;color: var(--color-neutral-10)">{{ data.commentForm.item.title }}</p>
              <p v-if="data.commentForm.item.content!=''" style="margin-top: 5px;font-size: 14px;user-select: text;width: 100%;word-break: break-all;color: var(--color-neutral-10)">{{ data.commentForm.item.content }}</p>
              <div style="margin-top: 5px">
                <image-group :server-u-r-l="config.serverURL" :images-u-r-ls="JSON.parse(data.commentForm.item.images)" :col-width="400"></image-group>
              </div>
              <p style="font-style: 12px;margin-top: 5px;color: var(--color-neutral-6)">发表于{{ formatDateForUser(new Date(data.commentForm.item.time)) }}</p>

            </div>

          </div>

          <div style="width: 600px;display: inline-block;float: right;height: 100%;position: relative;z-index: 1000"
            :style="{
              width:appData.pageSize.width<1430?'400px':'590px',
              height:appData.pageSize.width<1430?'auto':'100%',
            }"
          >
            <div v-if="appData.pageSize.width>1430" style="padding: 20px 20px;font-weight: bold;font-size: 18px;padding-bottom: 10px;color: var(--color-neutral-10)">
              评论（{{ data.commentForm.item.comments.length }}）
            </div>

            <div style="width: 100%;height: calc(100% - 57px - 66px);overflow-y: auto;overflow-y: auto;padding: 10px 20px;color: var(--color-neutral-10);"
              :style="{
                paddingBottom:appData.pageSize.width<1430?'200px':'10px'
              }"
            >
              <p v-if="data.commentForm.item.comments.length==0" style="text-align: center;color: var(--color-neutral-6);font-size: 14px;">没有评论</p>
              <div v-for="(item,index) in data.commentForm.item.comments" style="width: 100%;margin-bottom: 5px;position: relative;padding-top: 10px;padding-bottom: 10px"
                :style="{
                  borderTop:index==0?'unset':'1px solid var(--color-neutral-3)'
                }"
              >
                <div>
                  <v-avatar color="rgb(0,120,215)" style="margin-right: 10px;font-size: 8px" size="20">
                    <span v-if="item.userInfo.avatar==''">{{ tool.getShortName(item.userInfo.name) }}</span>
                    <div v-if="item.userInfo.avatar!=''"  style="width: 48px;height: 48px;display: inline-block;background-position: center;background-repeat: no-repeat;background-size: cover;"
                         :style="{
                      backgroundImage:'url(' + appData.serverURL + '/download/' + item.userInfo.avatar + ')'
                    }"
                    >
                    </div>
                  </v-avatar>
                  <p style="width: calc(100% - 80px);display: inline-block;"><span style="font-weight: bold;position: relative;top: 1px;">{{ item.userInfo.name }}</span><span style="color: var(--color-neutral-6);position: relative;top: 1px;left: 5px">{{ item.userInfo.email }}</span></p>
                  <button title="赞" style="padding: 2px 4px;border: 0 !important;font-size: 12px;position: absolute;right: 0px;"

                          @click="async ()=>{
                          if(homeData.loginedUserInfo==undefined){
                            router.push('/login')
                            return
                          }
                          await tool.axiosPostWithCheckStatus(config.serverURL,'/question/favorite',{
                            token: homeData.token,
                            userMark: homeData.loginedUserInfo.mark,
                            questionMark: item.mark,
                            op:isUserFavorite(JSON.parse(item.favoriteUserMarks),homeData.loginedUserInfo.mark)?false:true
                          })
                          // data.items = (await tool.axiosPostWithCheckStatus(config.serverURL,'/question/getAll',{
                          //   userSubjects:this.homeData.loginedUserInfo==undefined?undefined:(this.homeData.loginedUserInfo.subjects),
                          //   userMark: this.homeData.loginedUserInfo==undefined?undefined:(this.homeData.loginedUserInfo.mark),
                          //   input:this.data.search.input
                          // })).results
                          prepareItems()
                          await getAllQuestions(false)
                          for(let i=0;i<data.items.all.length;i++){
                            if(data.items.all[i].mark==data.commentForm.item.mark){
                              data.commentForm.item = data.items.all[i]
                              break
                            }
                          }
                        }"
                  >
                    <svg
                        :style="{
                    color:(homeData.loginedUserInfo!=undefined && isUserFavorite(JSON.parse(item.favoriteUserMarks),homeData.loginedUserInfo.mark)==true)?'red':'var(--color-neutral-10)'
                 }"
                        style="position: relative;top: 2.5px;margin-right: 2px" width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M26.675 2.493l.365.17c2.432 1.173 5.964 3.54 5.964 7.34 0 1.506-.67 3.504-2.007 5.994h7.578c5.968 0 7.339 5.268 5.968 9.215l-5.968 15.71c-.504 1.827-2.183 3.095-4.1 3.095H9.985v-28.02h4.094l8.9-12.661c.562-.894 2.08-1.58 3.696-.843zM7 16v28H3V16h4zm18.677-9.547l-9.52 13.544h-2.172v20.02h20.49c.124 0 .22-.073.245-.16l.05-.18 6.011-15.826c.79-2.328.002-3.854-2.206-3.854H24.307l3.167-5.893c1.053-1.96 1.53-3.385 1.53-4.101 0-1.16-1.244-2.474-3.327-3.55z" fill="currentColor"/></svg><span
                      :style="{
                    color:(homeData.loginedUserInfo!=undefined && isUserFavorite(JSON.parse(item.favoriteUserMarks),homeData.loginedUserInfo.mark)==true)?'red':'var(--color-neutral-10)'
                 }"
                  >赞<span v-if="JSON.parse(item.favoriteUserMarks).length!=0">{{ ' ' + JSON.parse(item.favoriteUserMarks).length.toString()}}</span></span>
                  </button>
                  <button title="删除评论" v-if="item.userInfo.mark==homeData.loginedUserInfo.mark" style="padding: 2px 4px;border: 0 !important;font-size: 12px;position: absolute;right: 0px;top: 35px" @click="async ()=>{
                    await tool.axiosPostWithCheckStatus(config.serverURL,'/question/delete',{
                      token:homeData.token,
                      questionMark:item.mark
                    })
                    await getAllQuestions(false)
                    for(let i=0;i<data.items.all.length;i++){
                      if(data.items.all[i].mark==data.commentForm.item.mark){
                        data.commentForm.item = data.items.all[i]
                        break
                      }
                    }
                }">
                    <svg style="position: relative;top: 2.5px;" width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M30 4a2 2 0 012 2l-.001 1.999L42.719 8c.445 0 .606.046.77.134.162.087.29.215.377.378.088.163.134.324.134.77v1.436c0 .446-.046.607-.134.77a.908.908 0 01-.378.378c-.163.088-.324.134-.77.134L40 11.999 40 42a2 2 0 01-2 2H10a2 2 0 01-2-2l-.001-30.001L5.282 12c-.446 0-.607-.046-.77-.134a.908.908 0 01-.378-.378c-.088-.162-.134-.324-.134-.77V9.282c0-.446.046-.607.134-.77a.909.909 0 01.378-.378c.163-.088.324-.134.77-.134l10.717-.001L16 6a2 2 0 012-2h12zm5.999 7.999h-24L12 40h24l-.001-28.001zM21 18a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2zm8 0a1 1 0 011 1v14a1 1 0 01-1 1h-2a1 1 0 01-1-1V19a1 1 0 011-1h2z" fill="currentColor"/></svg>
                  </button>
                </div>
                <div style="margin-top: 5px;padding-left: 29px;width: calc(100% - 25px);word-break: break-all;">
                  <p style="user-select: text !important">{{ item.content }}</p>
                  <image-group style="width: 300px" v-if="JSON.parse(JSON.parse(item.images)).length!=0" :server-u-r-l="config.serverURL" :col-width="300" :images-u-r-ls="JSON.parse(JSON.parse(item.images))"></image-group>
                  <p style="margin-top: 5px;font-size: 12px;color: var(--color-neutral-6)">{{ formatDateForUser(new Date(item.time)) }}</p>
                </div>

              </div>
            </div>

            <div style="width: 100%;padding: 20px 20px;position: absolute;left: 0;bottom: 0;padding-top: 10px"
              v-if="appData.pageSize.width>1430"
            >
              <div v-if="data.commentForm.image!=''" style="padding: 5px 5px;border-radius: 5px;border: 1px solid var(--color-neutral-3);width: 100px;height: 100px;backdrop-filter: blur(10px);position: absolute;bottom: 60px;backdrop-filter: blur(10px)"
                :style="{
                  background:appData.theme.translucentBackground
                }"
                   @click="openLink(config.serverURL + '/download/' + data.commentForm.image)"
              >
                <div style="width: 100%;height: 100%;background-repeat: no-repeat;background-position: center;background-size: cover;border-radius: 5px;position: relative"
                  :style="{
                  backgroundImage:'url(' + config.serverURL + '/download/' + data.commentForm.image + ')'
                  }"
                >

                </div>
              </div>
              <button :title="data.commentForm.image==''?'添加图片':'删除图片'" @click="async ()=>{
                if(data.commentForm.image==''){
                  let fn = await selectAndUploadImage()
                  this.data.commentForm.image = fn
                }else{
                  await tool.axiosPostWithCheckStatus(config.serverURL,'/delete',{
                    name:data.commentForm.image
                  })
                  data.commentForm.image = ''
                }
              }" style="border: 0 !important;padding: 5px 5px;height: 36px;width: 36px;text-align: center;padding-top: 8.5px;position: absolute;left: 20px;top: 10px;">
                <svg v-if="data.commentForm.image==''" width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M34 12a2 2 0 012 2v28a2 2 0 01-2 2H6a2 2 0 01-2-2V14a2 2 0 012-2h28zm-2 4H8v24h24V16zm-4.119 10.366a.8.8 0 01.235.565V35.4a.6.6 0 01-.6.6H23.51l.012.011H12.689a.6.6 0 01-.424-1.024l4.442-4.443a.8.8 0 011.12-.01l2.423 2.331 6.5-6.5a.8.8 0 011.131 0zM42 4a2 2 0 012 2v25a1 1 0 01-1 1h-2a1 1 0 01-1-1V8H17a1 1 0 01-1-1V5a1 1 0 011-1h25zM18 20v6h-6v-6h6z" fill="currentColor"/></svg>
                <svg v-if="data.commentForm.image!=''" width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M33 2l9 9.429V24h-4v-9.962l-8 .001L29.999 6H10v36h13v4H8a2 2 0 01-2-2V4a2 2 0 012-2h25zm2.07 32.24l4.75-4.75c.315-.315.462-.396.639-.45a.908.908 0 01.534 0c.177.054.324.135.64.45l1.015 1.016c.315.315.397.462.45.64a.908.908 0 010 .534c-.053.177-.135.324-.45.639l-4.75 4.75 4.75 4.75c.315.316.397.463.45.64a.908.908 0 010 .534c-.053.177-.135.324-.45.64l-1.015 1.015c-.316.315-.463.397-.64.45a.908.908 0 01-.534 0c-.177-.053-.324-.135-.64-.45l-4.75-4.75-4.75 4.75c-.315.315-.462.397-.64.45a.908.908 0 01-.534 0c-.177-.053-.324-.135-.639-.45l-1.015-1.015c-.316-.316-.397-.463-.45-.64a.908.908 0 010-.534c.053-.177.134-.324.45-.64l4.75-4.75-4.75-4.75c-.316-.315-.397-.462-.45-.64a.908.908 0 010-.534c.053-.177.134-.324.45-.639l1.015-1.015c.315-.316.462-.397.64-.45a.908.908 0 01.534 0c.177.053.324.134.639.45l4.75 4.75z" fill="currentColor"/></svg>
              </button>
              <input @keypress="async (e)=>{
                if(e.code!='Enter')return
                if(data.commentForm.input=='' && data.commentForm.image==''){
                    controlWarningForm(true,'提示','请输入评论内容或上传图片。',()=>{},false)
                    return
                  }
                  data.newQuestion.title = ''
                  data.newQuestion.content = data.commentForm.input
                  data.commentForm.input = ''
                  data.newQuestion.images = JSON.stringify(data.commentForm.image==''?[]:[data.commentForm.image])
                  await tool.axiosPostWithCheckStatus(config.serverURL,'/question/publish',{
                    form:data.newQuestion,
                    userMark:homeData.loginedUserInfo.mark,
                    questionMark:data.commentForm.item.mark,
                    token:homeData.token
                  })
                  await getAllQuestions(false)
                  for(let i=0;i<data.items.all.length;i++){
                    if(data.items.all[i].mark==data.commentForm.item.mark){
                      data.commentForm.item = data.items.all[i]
                      break
                    }
                  }

                  data.commentForm.image = ''

              }" v-model="data.commentForm.input" placeholder="在这里输入评论" style="border-radius: 3px;background-color: var(--color-neutral-1);width: calc(100% - 82px);line-height: 36px;padding: 0 10px;margin-left: 41px;outline: none;color: var(--color-neutral-10)" />
              <button style="border: 0 !important;padding: 5px 5px;height: 36px;width: 36px;text-align: center;padding-top: 8.5px;position: absolute;right: 20px;top: 10px" @click="async ()=>{
                  if(data.commentForm.input=='' && data.commentForm.image==''){
                    controlWarningForm(true,'提示','请输入评论内容或上传图片。',()=>{},false)
                    return
                  }
                  let t1 = data.newQuestion.title
            let t2 = data.newQuestion.content
            let t3 = data.newQuestion.input
            let t4 = data.newQuestion.images
            data.newQuestion.title = ''
            data.newQuestion.content = data.commentForm.input
            data.commentForm.input = ''
            data.newQuestion.images = JSON.stringify(data.commentForm.image==''?[]:[data.commentForm.image])
            await tool.axiosPostWithCheckStatus(config.serverURL,'/question/publish',{
              form:data.newQuestion,
              userMark:homeData.loginedUserInfo.mark,
              questionMark:data.commentForm.item.mark,
              token:homeData.token
            })
            data.newQuestion.title = t1
            data.newQuestion.content = t2
            data.newQuestion.input = t3
            data.newQuestion.images = t4
                  await getAllQuestions(false)
                  for(let i=0;i<data.items.all.length;i++){
                    if(data.items.all[i].mark==data.commentForm.item.mark){
                      data.commentForm.item = data.items.all[i]
                      break
                    }
                  }
                  data.commentForm.image = ''

                }">
                <svg width="18" height="18" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 17.003v-13c0-1.464 1.512-2.415 2.817-1.826l.134.066 37 20c1.35.73 1.397 2.626.14 3.437l-.14.082-37 20c-1.288.697-2.843-.182-2.946-1.61L5 44.002v-13a2 2 0 01.467-1.284l.119-.13 5.586-5.585-5.586-5.586a2 2 0 01-.578-1.238L5 17.003v-13 13zm31.094 8.999H14.829L9 31.832v8.816l27.094-14.646zM9 7.357v8.817l5.828 5.828h21.266L9 7.357z" fill="currentColor"/></svg>
              </button>
            </div>
          </div>
        </div>


        <button @click="controlCommentForm(false)" style="border: 0 !important;padding: 5px 5px;position: absolute;right: 15px;top: 15px;height: 34px;text-align: center;z-index: 1005">
          <svg width="24" height="24" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M23.886 20.957L37.32 7.522a1 1 0 011.414 0l1.414 1.414a1 1 0 010 1.415L26.714 23.786 40.149 37.22a1 1 0 010 1.414l-1.414 1.414a1 1 0 01-1.414 0L23.886 26.614 10.45 40.049a1 1 0 01-1.415 0l-1.414-1.414a1 1 0 010-1.414l13.435-13.435L7.622 10.35a1 1 0 010-1.415l1.414-1.414a1 1 0 011.415 0l13.435 13.435z" fill="currentColor"/></svg>
        </button>
      </div>
    </div>

  </div>
</template>

<script>
import tool from "@/utlis/tool"
import config from "@/config"
import router from "@/router";
import axios from 'axios'
const moment = require('moment');
import imageGroup from "@/components/imageGroup.vue";

export default{
  components:{
    imageGroup
  },
  computed:{
    tool(){
      return tool
    },
    router(){
      return router
    },
    localStorage(){
      return localStorage
    },
    config(){
      return config
    },
    window(){
      return window
    },
  },
  data() {
    return {
      data: {
        warningForm:{
          title:'',
          content:'',
          cancelText:'取消',
          okText:'确定',
          showCancel:true,
          okCallBack:()=>{},
        },
        search:{
          input:''
        },
        currentPage:0,
        rightPageWidth:0,
        rightPageWidthLast:0,
        rightPageColNum:3,
        items:{
          recommend:[],
          all:[],
          my:[]
        },
        displayItems:[],
        disNum:0,
        showWriteQuestionBoard:false,
        newQuestion:{
          title:'',
          content:'',
          images:[]
        },
        warningText:'',
        rightStatus:0,
        maxColHeight:0,
        commentForm:{
          status:0,
          item:{},
          input:'',
          image:''
        }
      },
      func: {
        getPageTotal: () => {},
        getShortName: ()=>{}
      }
    }
  },
  async mounted() {
    this.func.getShortName = tool.getShortName
    this.func.getPageTotal = tool.getPageTotal
    if (this.homeData.loginedUserInfo == undefined) {
      router.push('/')
      return
    }
    if(localStorage.getItem('quesionAutoSearch')!=null){
      this.data.search.input = '%' + localStorage.getItem('quesionAutoSearch') + '%'
      localStorage.removeItem('quesionAutoSearch')
      this.data.currentPage=1
    }
    this.getAllQuestions()
    setInterval(()=>{
      try {
        this.data.rightPageWidthLast = this.data.rightPageWidth
        this.data.rightPageWidth = document.getElementById('itemsWrapper').clientWidth
        let flags = [800,1200,1400]
        let flag = false
        for(let i=0;i<flags.length;i++){
          let re1 = flags[i] - this.data.rightPageWidth
          let re2 = flags[i] - this.data.rightPageWidthLast
          if(re1*re2<=0){
            flag = true
          }
        }
        if(flag){
          this.prepareItems()
        }

        this.data.maxColHeight = 0
        let re = document.getElementsByClassName('itemsCol')
        for(let i=0;i<re.length;i++){
          let height = 0
          let re11 = re[i].getElementsByClassName('questionItem')
          for(let i1=0;i1<re11.length;i1++){
            height+=re11[i1].clientHeight + 20
          }
          if(height>this.data.maxColHeight){
            this.data.maxColHeight = height
          }
        }
      }catch (e) {

      }

    },1)
  },
  methods: {
    getUserCommentAll(){
      let re = 0
      for(let i=0;i<this.data.items.my.length;i++){
        re += this.data.items.my[i].comments.length
      }
      return re
    },
    getUserFavoriteAll(){
      let re = 0
      for(let i=0;i<this.data.items.my.length;i++){
        re += JSON.parse(this.data.items.my[i].favoriteUserMarks).length
      }
      return re
    },
    getUserSubjectsString(subjects){
      try {
        subjects = JSON.parse(subjects)
      } catch (error) {
        
      }
      let re = ''
      for(let i=0;i<Object.keys(subjects).length;i++){
        if(subjects[Object.keys(subjects)[i]]==false)continue
        if(re!=''){
          re+='、'
        }
        switch (Object.keys(subjects)[i]) {
          case 'wl':
            re+='物理'
            break
          case 'hx':
            re+='化学'
            break
          case 'sw':
            re+='生物'
            break
          case 'zz':
            re+='政治'
            break
          case 'ls':
            re+='历史'
            break
          case 'dl':
            re+='地理'
            break
        }
      }
      return re
    },
    openLink(url){
      window.open(url,'_blank')
    },
    async controlCommentForm(op,item = {}){
      if(op){
        this.data.commentForm.item = item
        this.data.commentForm.status = 1
        await tool.waitSeconds(0.001)
        this.data.commentForm.status = 2
      }else{
        this.data.commentForm.status = 1
        await tool.waitSeconds(0.3)
        this.data.commentForm.status = 0
      }
    },
    isUserFavorite(arr,item){
      for(let i=0;i<arr.length;i++){
        if(arr[i]==item){
          return true
        }
      }
      return false
    },
    formatDateForUser(date) {
      const now = moment();
      const diff = now.diff(date, 'seconds');

      if (diff < 60) {
        return diff + '秒前';
      } else if (diff < 60 * 60) {
        return Math.floor(diff / 60) + '分钟前';
      } else if (diff < 24 * 60 * 60) {
        return Math.floor(diff / (60 * 60)) + '小时前';
      } else {
        return date.getFullYear().toString() + '年' + (date.getMonth() + 1).toString() + '月' + date.getDate().toString() + '日 ' + date.getHours().toString() + ':' + date.getMinutes().toString() + ':' + date.getSeconds().toString()
      }
    },
    async refreshRightPage(op){
      this.data.rightStatus = 1
      await tool.waitSeconds(0.3)
      this.data.rightStatus = 2
      this.data.displayItems = []
      await tool.waitSeconds(0.001)
      await op()
      await tool.waitSeconds(0.001)
      this.data.rightStatus = 3
      await tool.waitSeconds(0.3)
      this.data.rightStatus = 0
    },
    async getAllQuestions(showAni = true){
      this.controlLoading(1)
      let ttt = this.homeData.loginedUserInfo.subjects
      try {
        ttt = JSON.parse(ttt)
      } catch (error) {
        
      }
      let re = await tool.axiosPostWithCheckStatus(config.serverURL,'/question/getAll',{
        userSubjects:this.homeData.loginedUserInfo==undefined?undefined:ttt,
        userMark: this.homeData.loginedUserInfo==undefined?undefined:(this.homeData.loginedUserInfo.mark),
        input:this.data.search.input
      })
      this.data.items = re.results
      if(showAni){
        this.refreshRightPage(this.prepareItems)
      }else{
        this.prepareItems()
      }
      this.controlLoading(0)
    },
    selectAndUploadImage(){
      return new Promise(async (resolve,reject)=>{
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.addEventListener('change', (e) => {
          const file = e.target.files[0];
          if (file) {
            const formData = new FormData();
            formData.append('file', file);
            axios.post(config.serverURL + '/upload', formData, {
              headers: {
                'Content-Type': 'multipart/form-data'
              }
            }).then(async response => {
              let fn = response.data.results
              return resolve(fn)
            }).catch(error => {

            });
          } else {

          }
        });
        fileInput.click();
      })
    },
    async uploadImage() {
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.addEventListener('change', (e) => {
        const file = e.target.files[0];
        if (file) {
          const formData = new FormData();
          formData.append('file', file);
          axios.post(config.serverURL + '/upload', formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then(async response => {
            let fn = response.data.results
            this.data.newQuestion.images.push(fn)
          }).catch(error => {

          });
        } else {

        }
      });
      fileInput.click();
    },
    prepareItems(){
      let currentItemsName = ''
      switch (this.data.currentPage) {
        case 0:
          currentItemsName = 'recommend'
          break
        case 1:
          currentItemsName = 'all'
          break
        case 2:
          currentItemsName = 'my'
          break
      }
      let num = 4
      if(this.data.rightPageWidth<1400){
        num = 3
      }
      if(this.data.rightPageWidth<1200){
        num = 2
      }
      if(this.data.rightPageWidth<800){
        num = 1
      }
      let re = []
      for(let i=0;i<num;i++){
        re.push([])
      }
      let co = 0
      for(let i=0;i<this.data.items[currentItemsName].length;i+=num){
        for(let i1=0;i1<num;i1++){
          if(i+i1>=this.data.items[currentItemsName].length){
            break
          }
          co+=1
          re[i1].push(this.data.items[currentItemsName][i+i1])
        }
      }
      this.data.disNum = co
      this.data.rightPageColNum = num
      this.data.displayItems = re
    },
    controlWarningForm(show,title,content,okCallBack = ()=>{},showCancel = true,cancelText = '取消',okText = '确定'){
      if(show){
        this.data.warningForm.title = title
        this.data.warningForm.content = content
        this.data.warningForm.cancelText = cancelText
        this.data.warningForm.okText = okText
        this.data.warningForm.okCallBack = okCallBack
        this.data.warningForm.showCancel = showCancel
        let re = document.getElementsByClassName('form-bg')
        for(let i=0;i<re.length;i++){
          if(re[i].id=='warningForm'){
            re[i].style.display = 'inline-block'
            return
          }
        }
      }else{
        let re = document.getElementsByClassName('form-bg')
        for(let i=0;i<re.length;i++){
          if(re[i].id=='warningForm'){
            re[i].style.display = 'none'
            return
          }
        }
      }
    },
  },
  props: {
    appData: undefined,
    homeData: undefined,
    controlLoading: undefined,
    ctrlCharm: undefined,
    ctrlForm: undefined,
    rsps: undefined,
    controlForward:undefined
  },
}
</script>

<style scoped>

.form-content {
  padding-top: 10px;
  color: var(--color-neutral-10);
  padding-bottom: 20px;
}

.form-footer {
  padding-top: 10px;
  text-align: right;
}

.form-title {
  position: relative;
  width: 100%;
  color: var(--color-neutral-10);
  min-height: 24px;
}

.form-bg {
  width: calc(100vw - 70px);
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  right: 0;
  top: 0;
  z-index: 2000;
  padding-left: calc(50vw - 35px);
  padding-top: 50vh;
  display: none;
}

.form {
  transform: translate(-50%, -50%);
  padding: 20px 20px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  position: relative;
  min-width: 500px;
  display: inline-block;
  background-color: var(--color-neutral-1);
}

.subItem:hover {
  background-color: var(--color-neutral-2);
}

.item-wrapper {
  opacity: 0;
  display: inline-block;
}

.item {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  position: relative;
  color: var(--color-neutral-10);
  border: 1px solid var(--color-neutral-3);
  background-color: var(--color-neutral-1);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.link {
  font-size: 18px;
  color: var(--color-neutral-10);
  margin-right: 10px;
}

.link:hover {
  color: var(--color-neutral-8);
}

.link:active {
  color: var(--color-neutral-9);
}

.link-selected {
  font-size: 18px;
  color: var(--color-neutral-10);
  font-weight: bold;
  border-bottom: 3px solid rgb(0, 120, 215);
  margin-right: 10px;
}

.link-selected:hover {
  color: var(--color-neutral-8);
}

.link-selected:active {
  color: var(--color-neutral-9);
}

.imageControl{
  display: none;
}

.imageWrapper:hover .imageControl{
  display: unset;
}

#searchQuestionInput:focus{
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

</style>